import './index.scss'
import { microCreateMinis } from '../../minis'
import utils from '@/utils/utils'

export default {
  name: 'count-down',
  mixins: [microCreateMinis],
  props: {

  },
  components: {
    // 图片
    chooseImages: () => import('@/components/new-choose-images/index.vue'),
    uCountDown: () => import('./countDown.vue')
  },
  data() {
    const _this = this
    return {
      tabActive: 0,
      formData: {
        startDate: '',
        startTime: '',
        endDate: '',
        endTime: '',
        countDownText: '倒计时',
        showType: '0',
        styleType: '0',
        textColor: '#464646',
        countDownColor: '#000000',
        bgStyleType: '0',
        bgColor: '#FFFFFF',
        bgImgUrl: '',
        bgImgWidth: 0,
        bgImgHeight: 0,
        marginTop: '0',
        marginBottom: '0',
        height: 50
      },
      chooseImgNum: 1,
      startPicker: {
        disabledDate(time) {
          return time.getTime() < (Date.now() - 24 * 3600 * 1000)
        }
      },
      timeStartPicker: utils.dateFormatter(new Date(), 'hh:mm:ss') + ' - 23:59:59',
      endPicker: {
        disabledDate(time) {
          return time.getTime() < (new Date(_this.formData.startDate).getTime() - 24 * 3600 * 1000)
        }
      },
      timeEndPicker: '00:00:00 - 23:59:59',
      commonCheckFieldRules: 'checkData', // 当前组件默认的规则判断函数
      mySelfCheckRules: 'mySelfCheckFun',// 我自己的验证规则函数  比如弹窗之类的
    }
  },
  computed: {
    countDownBg() {
      let bg = ''
      if (this.formData.bgStyleType === '0') {
        bg = this.formData.bgColor
      } else if (this.formData.bgStyleType === '1') {
        bg = 'url(' + this.formData.bgImgUrl + ') no-repeat center center'
      }
      return bg
    },
    timestamp() {
      let time = 0
      const nowTime = new Date().getTime()
      // let startTime = new Date(this.formData.startDate + ' '+ this.formData.startTime).getTime();
      const endTime = new Date(this.formData.endDate + ' ' + this.formData.endTime).getTime()
      const deltaTime = endTime - nowTime
      if (deltaTime >= 0) {
        time = Math.round(deltaTime / 1000)
      }
      return time
    },
    showDay() {
      return this.formData.showType !== '0'
    },
    isZh() {
      let flag = 'colon'
      if (this.formData.styleType === '2') {
        flag = 'zh'
      }
      return flag
    },
    timeColor() {
      let textColor = '#FFFFFF'
      if (this.formData.styleType === '2') {
        textColor = this.formData.countDownColor
      }
      return textColor
    },
    timeBgColor() {
      let bgColor = this.formData.countDownColor
      if (this.formData.styleType === '2') {
        bgColor = 'transparent'
      }
      return bgColor
    }

  },
  methods: {
    // 开始时间获取焦点
    timeStartFocus() {
      this.timeStartPicker = utils.dateFormatter(new Date(), 'hh:mm:ss') + ' - 23:59:59'
    },
    // 结束时间获取焦点
    timeEndFocus() {
      if (this.formData.startDate === this.formData.endDate) {
        this.timeEndPicker = this.formData.startTime + ' - 23:59:59'
      } else {
        this.timeEndPicker = '00:00:00 - 23:59:59'
      }
    },
    // 重置颜色
    resetBoderColor(type) {
      if (type === 1) {
        this.formData.textColor = '#464646'
      } else if (type === 2) {
        this.formData.countDownColor = '#000000'
      } else if (type === 3) {
        this.formData.bgColor = '#FFFFFF'
      }
    },
    // 显示选择图片
    showUpload() {
      this.$refs.pics.dialog = true
    },
    // 选择图片后的回调
    chooseImgCallBack(res) {
      if (res.data && res.data.length) { // img
        this.formData.bgImgUrl = res.data[0]
      }
    },
    checkData() {
      let isPass = true
      this.myCheckResult(isPass)
    },
    /** 弹窗*/
    mySelfCheckFun() { // 可以选择调用默认规则判断
    }
  }
}
